<template>
  <div class="body">
    <input type="text" v-model="iptVal" />
    <ul>
      <li v-for="item in searchList" :key="item.id" @click="goHome(item)">
        {{ item.name }}
      </li>
    </ul>
    <div id="container"></div>
    <div id="box"></div>
  </div>
</template>
   
  <script>
import {
  mapMutations,
  // mapState
} from 'vuex'
export default {
  data() {
    return {
      iptVal: '',
      cityText: '',
      searchList: [],
    }
  },
  watch: {
    //----------------------监听搜索框变化，获取有关数据-----------------
    iptVal() {
      var that = this
      // eslint-disable-next-line no-undef
      AMap.plugin('AMap.AutoComplete', function () {
        var autoOptions = {
          //city 限定城市，默认全国
          city: that.cityText,
        }
        // 实例化AutoComplete
        // eslint-disable-next-line no-undef
        var autoComplete = new AMap.AutoComplete(autoOptions)
        // 根据关键字进行搜索
        // eslint-disable-next-line no-undef
        autoComplete.search(that.iptVal, function (status, result) {
          // 搜索成功时，result即是对应的匹配数据
          console.log(result)
          that.searchList = result.tips
        })
      })
    },
  },
  mounted() {
    var that = this

    var location_lon = ''
    var location_lat = '' // 经度,纬度
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(function (position) {
        location_lon = position.coords.longitude
        location_lat = position.coords.latitude
        console.log(location_lon, location_lat, '获取定位')
      })
    } else {
      alert('您的设备不支持定位功能')
    }
    // if (that.$store.state.cityinfo.name) {
    //   that.cityText = that.$store.state.cityinfo.name
    //   return
    // }
    // eslint-disable-next-line no-undef
    AMap.plugin('AMap.CitySearch', function () {
      // eslint-disable-next-line no-undef
      var citySearch = new AMap.CitySearch()
      citySearch.getLocalCity(function (status, result) {
        if (status === 'complete' && result.info === 'OK') {
          // 查询成功，result即为当前所在城市信息
          that.cityText = result.city
          console.log(result)
        }
      })
    })

    //--------------------定位-------------------------
    // eslint-disable-next-line no-undef
    AMap.plugin('AMap.CitySearch', function () {
      // eslint-disable-next-line no-undef
      var citySearch = new AMap.CitySearch()
      citySearch.getLocalCity(function (status, result) {
        if (status === 'complete' && result.info === 'OK') {
          // 查询成功，result即为当前所在城市信息
          that.cityText = result.city
          console.log(result)
        }
      })
    })
    //如果cityinfo里存在数据，地图显示cityinfo里的地点（上一次搜索点击的地点），否则展示定位市区（pc端定位不准）
    if (false) {
      var cityInfo = this.$store.state.cityinfo
      // eslint-disable-next-line no-undef
      var map = new AMap.Map('box', {
        zoom: 18, //级别
        center: [cityInfo.location.lng, cityInfo.location.lat], //中心点坐标
      })
      // eslint-disable-next-line no-undef
      var marker = new AMap.Marker({
        position: [cityInfo.location.lng, cityInfo.location.lat], //选择标记位置
      })
      map.add(marker) //将标记添加到地图
      return
    } else {
      // eslint-disable-next-line no-redeclare,no-unused-vars,no-undef
      var map = new AMap.Map('box', {
        zoom: 8, //级别
      })
    }
  },
  methods: {
    //点击搜索的地点，将该地点存入cityInfo，并回到首页
    goHome(val) {
      this.addCityINfo(val)
      this.$router.push('/home')
    },
    ...mapMutations({
      addCityINfo: 'uptCityInfo',
    }),
  },
}
</script>
   
  <style scoped>
#container {
  width: 100%;
  height: 750px;
}
#box {
  width: 100%;
  height: 800px;
}
.body input {
  margin: 50px;
  border: 1px solid #ccc;
  border-radius: 10px;
  height: 80px;
}
.body ul li {
  text-align: left;
  font-size: 20px;
  padding: 10px;
  border-bottom: 1px solid #cccccc;
  margin: 10px;
}
</style>